<template>
	<div class="contentItem">
		<div class="percent"></div>
		<div class="content">
			<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
			<b>Big Fish</b>
			<b>1.1 ETH</b>
		</div>
	</div>
</template>

<script>
export default {};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.contentItem {
	width: 80%;
	margin-left: 10%;
	height: 40px;
	margin-top: 10px;
}

.percent {
	position: relative;
	left: 0;
	top: 0;
	width: 70%;
	height: 100%;
	background-color: #f4f7ff;
	border-radius: 20px;
}

.content {
	position: relative;
	left: 20px;
	top: -40px;
	height: 40px;
	display: flex;
	align-items: center;
}
b {
	margin: 0 10px;
}
</style>
